<script lang="ts" setup>
import { RouteMap, useRouter } from '@/router';
import { onMounted, reactive, ref } from 'vue';
// @ts-ignore
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll';
// @ts-ignore
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue';
import { delCollect, getCollectList } from '@/api/user';
import { useAuthStore } from '@/store/auth';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const authStore = useAuthStore();
const router = useRouter();
const statusBarH = ref(0);
const list = ref<any[]>([]);

const upOption = reactive({
  // 首次自动执行
  auto: false,
  // 数量要大于3条才显示无更多数据
  noMoreSize: 3,
  offset: 10,
  textLoading: '',
  empty: {
    use: false
  }
});
const downOption = reactive({
  textInOffset: '',
  textOutOffset: '',
  textLoading: '',
  textSuccess: ''
});
const { mescrollInit, downCallback } = useMescroll();

const upCallback = async (mescroll: any) => {
  const payload: any = {
    pageNum: mescroll.num,
    pageSize: mescroll.size,
    collectType: 'HOST'
  };

  const res = await getCollectList(payload);
  let newList = res.data.list;
  if (!res.data.list) {
    newList = [];
  }
  mescroll.endBySize(newList.length, res.data.totalCount);
  if (mescroll.num == 1) {
    list.value = [];
  }
  list.value = list.value.concat(newList);
};

async function delItem(id: number, index: number) {
  const res = await delCollect(id);
  uni.showToast({
    title: res.message,
    icon: 'none'
  });
  if (res.code == 0) {
    list.value.splice(index, 1);
  }
}

function navigateToLogin() {
  if (!authStore.isLoggedIn) {
    uni.navigateTo({
      url: '/pages/auth/login'
    });
  }
}

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      statusBarH.value = res.statusBarHeight || 0;
    }
  });
});
</script>

<template>
  <uni-nav-bar
    v-if="isWechat()"
    :border="false"
    :title="t('LAKey_collect')"
    fixed
    left-icon="left"
    status-bar
    @click-left="router.back"
  ></uni-nav-bar>
  <view :style="{ minHeight: 'calc(100vh - 44px - ' + statusBarH + 'px)' }" class="collect-contain">
    <view style="height: 20rpx"></view>
    <view
      :style="{
        height: 'calc(100vh - 44px - 20rpx - ' + statusBarH + 'px)',
        background: list.length > 0 ? '#FFFFFF' : 'none'
      }"
      class="collect-contain-list"
    >
      <mescroll-uni
        ref="mescrollRef"
        :down="downOption"
        :fixed="false"
        :up="upOption"
        @down="downCallback"
        @init="mescrollInit"
        @up="upCallback"
      >
        <view
          v-for="(item, index) in list"
          v-if="list.length > 0"
          :key="index"
          class="collect-contain-list-item"
        >
          <view class="collect-contain-list-item-img">
            <image :src="item.cover" />
          </view>
          <view class="collect-contain-list-item-content">
            <view class="collect-contain-list-item-content-top">
              <view class="collect-contain-list-item-content-top-t1">{{ item.name }}</view>
              <view class="collect-contain-list-item-content-top-t2">{{ item.address }}</view>
              <view class="collect-contain-list-item-content-top-tags">
                <view v-for="item1 in item.tagListArr" :key="index">{{ item1 }}</view>
              </view>
            </view>
            <view class="collect-contain-list-item-content-bottom">
              <view @click="delItem(item.collectId, index)">{{ t('LHTKey_delete') }}</view>
              <view
                @click="
                  router.to(RouteMap.hotelDetails, {
                    id: item.id,
                    puid: item.uid
                  })
                "
              >
                {{ t('LHTKey_reservationNow') }}
              </view>
            </view>
          </view>
        </view>
        <view
          v-else
          :style="{ height: 'calc(100vh - 44px - 20rpx - ' + statusBarH + 'px)' }"
          class="collect-contain-empty"
        >
          <view class="collect-contain-empty-view">
            <image
              src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/icon_collect_empty.png"
            />
            <view v-if="authStore.isLoggedIn">{{ t('LAKey_collectEmpty') }}</view>
            <view v-else-if="!authStore.isLoggedIn" style="color: #269c74" @click="navigateToLogin">
              {{ t('SignIn') }}
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.collect {
  &-contain {
    &-list {
      background: #ffffff;
      padding-top: 20rpx;
      padding-left: 32rpx;
      padding-bottom: 20rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
      padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

      &-item {
        display: flex;

        &-img {
          display: block;
          width: 192rpx;
          border-radius: 8rpx 8rpx 58rpx 8rpx;
          padding-bottom: 20rpx;

          image {
            display: block;
            width: 192rpx;
            height: 282rpx;
            border-radius: 8rpx 8rpx 58rpx 8rpx;
          }
        }

        &-content {
          flex: 1;
          margin-left: 20rpx;
          border-bottom: 1px solid #f4f4f4;
          padding-right: 32rpx;
          padding-bottom: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          &-top {
            &-t1 {
              font-weight: 500;
              font-size: 32rpx;
              color: #3d3d3d;
              line-height: 44rpx;
            }

            &-t2 {
              font-weight: 400;
              font-size: 24rpx;
              color: #898989;
              line-height: 34rpx;
              margin-top: 6rpx;

              text {
                color: #d8d8d8;
              }
            }

            &-tags {
              margin-top: 20rpx;
              overflow: hidden;

              view {
                float: left;
                margin-right: 8rpx;
                margin-bottom: 8rpx;
                height: 32rpx;
                line-height: 32rpx;
                border-radius: 4rpx;
                border: 1px solid #117954;
                padding: 0 6rpx;
                font-weight: 400;
                font-size: 20rpx;
                color: #117954;
              }
            }
          }

          &-bottom {
            display: flex;
            justify-content: flex-end;

            view {
              height: 52rpx;
              line-height: 52rpx;
              padding: 0 40rpx;
              border-radius: 52rpx;
              font-weight: 400;
              font-size: 26rpx;
              margin-left: 20rpx;

              &:first-child {
                border: 1px solid #d8d8d8;
                color: #3d3d3d;
              }

              &:last-child {
                border: 1px solid #269c74;
                background: #269c74;
                color: #ffffff;
              }
            }
          }
        }
      }
    }

    &-empty {
      &-view {
        padding-top: 128rpx;
        position: relative;
        width: 556rpx;
        height: 556rpx;
        margin: 0 auto;

        image {
          display: block;
          width: 100%;
          height: 100%;
        }

        view {
          text-align: center;
          font-size: 28rpx;
          color: #afafaf;
          line-height: 44rpx;
          font-weight: 400;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 84rpx;
        }
      }
    }
  }
}
</style>
